błędy – Walidacja bloku nie powiodła się dla bloku komponentu React, który rehydratuje się po wejściu w życie
Mam ten konkretny blok
niż gdy wstawiam do Edytora, pojawia mi się ten błąd:
a błąd brzmi następująco:
Treść wygenerowana przez
save
funkcjonować:
Treść pobrana z treści posta:
Kod komponentu React:
import { HydratedInnerBlock } from '../../../src/components/HydratedInnerBlock';
import { DEFAULT_IMAGE } from '../../../src/constants';
import { useStyleModeClassName } from '../../../src/hooks/useStyleModeClassName';
import { cssClassName } from '../../../src/util/cssClassName';
export const MyComponent = ( props ) => {
const { mediaSrc, isImage, styleMode, isCardLeft, innerBlockProps } = props;
const classNames = useStyleModeClassName( styleMode );
const [ baseClassName ] = classNames;
return (
{ isImage && (
) }
{ ! isImage && (
) }
{ isImage && (
) } { ! isImage && (
) }
); };
Kod edytora bloku:
import { useEffect } from '@wordpress/element';
import {
useBlockProps,
InspectorControls,
MediaUpload,
useInnerBlocksProps,
} from '@wordpress/block-editor';
import { Panel, PanelBody, ToggleControl } from '@wordpress/components';
import { DEFAULT_IMAGE } from '../../src/constants';
import { EditorFileSelector } from '../../src/components/EditorFileSelector';
import './Editor.scss';
import { cssClassName } from '../../src/util/cssClassName';
import { useStyleModeClassName } from '../../src/hooks/useStyleModeClassName';
import { ColorModeSelector } from '../../src/components/ColorModeSelector';
/**
* The edit function describes the structure of your block in the context of the
* editor. This represents what the editor will render when the block is used.
* Note this is a client-side component, so you can use client-side functionality
* (hooks, events, ajax calls, etc)
*/
const TEMPLATE = [
[
'core/heading',
{
content:
'Content 1',
level: 2,
className: 'my-block__title',
},
],
[
'core/heading',
{
content: 'Content2',
level: 5,
className: 'my-block__subtitle',
},
],
[
'core/paragraph',
{
content:
'Content3',
className: 'my-block__description',
},
],
[
'core/buttons',
{},
[
[
'core/button',
{
text: 'Get Started',
className: 'btn btn-dark',
},
],
],
],
];
export const Editor = ( {
attributes: {
styleMode,
mediaSrc,
ctaTarget,
isImage,
isCardLeft,
previewImage,
},
setAttributes,
} ) => {
const blockProps = useBlockProps();
const classNames = useStyleModeClassName( styleMode );
const [ baseClassName, invertedClassName ] = classNames;
const innerBlockProps = useInnerBlocksProps( undefined, {
template: TEMPLATE,
} );
useEffect( () => {
const button = document.querySelector( '.btn' );
if ( button ) {
button.className="";
button.classList.add( 'btn', `btn-${ invertedClassName }` );
}
}, [ invertedClassName ] );
const handleMediaUpload = ( value ) => {
setAttributes( { mediaSrc: value.url } );
};
const handleLinkTab = ( value ) => {
setAttributes( { ctaTarget: value } );
};
const handleMediaTypeChange = ( value ) => {
setAttributes( { isImage: value } );
};
const handleCardPosition = ( value ) => {
setAttributes( { isCardLeft: value } );
};
const handleSelectStyleMode = ( value ) => {
setAttributes( { styleMode: value } );
};
if ( previewImage?.length > 0 ) {
return (
);
}
return (
{ isImage && (
) } { ! isImage && (
) }
{ jestObrazem && (
) } { ! isImage && (
) }
(
) } dozwoloneTypy={ [ 'image', 'video' ] } />
); };
I jego Save.js:
/**
* The 'Save' component of the block. This renders on server-side only
* We separate this initializer from the 'Form' component because
* the 'Form' component would also be used after hydration.
*
*/
export const Save = ( { attributes } ) => {
const blockProps = useBlockProps.save();
const innerBlockProps = useInnerBlocksProps.save();
const { isDarkMode } = attributes;
const blockState = JSON.stringify( {
...attributes,
} )
// remove html comments
.replace( /<\!--.+?-->/g, '' );
return (
<>